﻿<Page
    x:Class="ImgurViral.Views.MainPageView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ImgurViral.Views"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:vm="using:ImgurViral.ViewModels"
    xmlns:cm="using:Caliburn.Micro"
    d:DataContext="{d:DesignInstance Type=vm:MainPageViewModel, IsDesignTimeCreatable=True}"
    cm:Bind.AtDesignTime="True">
    
    <Page.BottomAppBar>
        <CommandBar ClosedDisplayMode="Minimal">
            <CommandBar.PrimaryCommands>
                <AppBarButton Icon="ReShare" Label="Share" Name="Share" />
                <AppBarButton Icon="Remove" Label="Logout">
                    <AppBarButton.Flyout>
                        <Flyout>
                            <StackPanel>
                                <TextBlock Text="" x:Uid="msg_logout" FontFamily="Segoe UI Semibold" FontSize="16" />
                                <Button Content="OK" Name="Logout" Background="#FF89C624" Margin="8" HorizontalAlignment="Right" />
                            </StackPanel>
                        </Flyout>
                    </AppBarButton.Flyout>
                </AppBarButton>
            </CommandBar.PrimaryCommands>
        </CommandBar>
    </Page.BottomAppBar>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="100"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Grid Grid.Row="0" Background="#FF89C624">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="100" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Image Grid.Column="0" Source="ms-appx:///Assets/imgur_logo_dot.png" Stretch="Uniform" Margin="5"/>
            <ProgressRing Grid.Column="0" IsActive="{Binding ProgressRingIsActive}" Height="60" Width="60" HorizontalAlignment="Center" />
            <Grid Grid.Column="1" Margin="5">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <TextBlock Grid.Row="0" Grid.Column="0" x:Uid="AppTitle" Text="" VerticalAlignment="Top" FontFamily="Segoe UI Light" FontSize="24" />
                <StackPanel Grid.Row="0" Grid.Column="1" Orientation="Vertical" HorizontalAlignment="Right">
                    <TextBlock FontFamily="Segoe UI Semibold" FontSize="14" >
                            <Run Text="Score: " />
                            <Run Text="{Binding ElementName=Items, Path=SelectedItem.Score}" />
                    </TextBlock>
                    <TextBlock FontFamily="Segoe UI Semibold" FontSize="14" >
                            <Run Text="Views: " />
                            <Run Text="{Binding ElementName=Items, Path=SelectedItem.Views}" />
                    </TextBlock>
                </StackPanel>
                <TextBlock Grid.Row="1" Grid.ColumnSpan="2" Text="{Binding ElementName=Items, Path=SelectedItem.Title}" VerticalAlignment="Bottom" FontFamily="Segoe UI Light" FontSize="14" TextWrapping="Wrap" TextTrimming="WordEllipsis" />
            </Grid>
        </Grid>

        <Grid Grid.Row="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <FlipView Grid.Row="0"  Grid.RowSpan="2" x:Name="Items" SelectedItem="{Binding SelectedItem, Mode=TwoWay}" IsTabStop="True">
                <FlipView.ItemTemplate>
                    <DataTemplate>
                        <ScrollViewer ZoomMode="Enabled" VerticalScrollBarVisibility="Hidden" MinZoomFactor="0.5" MaxZoomFactor="1.0" VerticalScrollMode="Auto" HorizontalScrollMode="Disabled" cm:Message.Attach="[Event DoubleTapped] = [Action ImageDoubleTapped($source)]" >
                            <Image Source="{Binding Link}" Stretch="Uniform" VerticalAlignment="Center" HorizontalAlignment="Center" cm:Message.Attach="[Event ImageOpened] = [Action ImageIsOpened()]; [Event ImageFailed] = [Action ImageIsFailed()]"/>
                        </ScrollViewer>
                    </DataTemplate>
                </FlipView.ItemTemplate>
            </FlipView>
            <Border Grid.Row="0" Background="#7F89C624" Width="Auto" HorizontalAlignment="Right" Margin="4">
                <TextBlock FontFamily="Segoe UI Semibold" FontSize="14" HorizontalAlignment="Right" Margin="4">
                    <Run Text="{Binding ElementName=Items, Path=SelectedIndex, Converter={StaticResource IndexConv}}"/>
                    <Run Text="/" />
                    <Run Text="{Binding Items.Count}" />
                </TextBlock>
            </Border>
        </Grid>
    </Grid>
</Page>
